<template>
    <div class="cashw">
        <date-select-s ref="date" @selectDone="selected"></date-select-s>
        <div class="top">
            <div class="date" @click="chooseTime">
                {{text}}
                <svg class="icon down" aria-hidden="true">
                    <use xlink:href="#icon-expandmore"></use>
                </svg>
            </div>
            <div class="right" v-show="stateScreen">
                <div class="choose" @click="chooseType">
                    <svg class="icon icon-choose" aria-hidden="true">
                        <use xlink:href="#icon-shaixuan"></use>
                    </svg>
                    筛选
                </div>
            </div>
        </div>
        <van-list
                v-model="loading"
                :finished="finished"
                @load="onLoad"
                :immediate-check="false"
                class="order"
        >
            <van-cell
                    v-for="(info, key) in list"
                    :key="key"
                    class="cell"
            >
                <money-cell-single :info="info" :type="type"></money-cell-single>
                <div class="line"></div>
            </van-cell>
        </van-list>
        <div v-if="finished" class="no-more">没有更多了</div>
    </div>
</template>
<script>
    import API from '../../request/api';
    import dayjs from 'dayjs';
    import DateSelectS from "../../components/common/date-select-s";
    import moneyCellSingle from "../../components/User/moneyCellSingle";


    const FMT = 'YYYY-MM-DD HH:mm:ss';
    export default {
        /**
         * 未到账记录
         */
        name: "cashWithRecord",
        components: {DateSelectS, moneyCellSingle},
        data() {
            return {
                startDate: dayjs().startOf('day')
                    .format(FMT),
                endDate: dayjs().format(FMT),
                text: '今日',
                page: 0,
                list: [],
                loading: false,
                finished: false,
                activeChoose: '0',
                activeArray: [],
                stateScreen: true,
                type: ''
            };
        },
        created() {
            let type = this.$route.query.type;
            this.type = type;
            if (type === '3') {
                // 未到账记录
                this.activeArray = [];
                this.stateScreen = false;
            }
            this.onLoad();
        },
        methods: {
            chooseTime() {
                this.$refs.date.show();
            },
            chooseTime() {
                this.$refs.date.show();
            },
            chooseType() {

            },
            onLoad() {
                console.log('是啊啊啊啊啊啊啊啊');
                if (this.finished === false) {
                    let data = {
                        page: this.page,
                        start_time: this.startDate,
                        end_time: this.endDate,
                        type: this.type,
                        category: this.activeChoose,
                    };
                    // this.receive = true;
                    this.request.get(API.earning, data).then(res => {
                        if (this.page === 0) {
                            this.list = res.list;
                        } else {
                            this.list = this.list.concat(res.list);
                        }
                        this.page++;
                        if (res.total_page <= this.page) {
                            this.finished = true;
                        }
                        this.loading = false;
                    }, () => {
                    });
                }
            },
            selected(arr, text) {
                this.startDate = arr[0];
                this.endDate = arr[1];
                this.text = text;
                this.page = 0;
                this.finished = false;
                this.list = [];
                this.loading = true;
                this.onLoad();
            },
        },

    };
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
    @import '~assets/main.styl'
    .cashw {
        .top {
            display flex
            justify-content space-between
            padding 0 cellPadding
            height vw(40)
            align-items center
            background-color grayF
            .date {
                color main-color
                display flex
                align-items center
                .down {
                    width vw(12)
                    height vw(12)
                    margin-left titleMargin
                }
            }
            .right {
                display flex
                align-items center
            }
            .choose {
                display flex
                align-items center
                .icon-choose {
                    width vw(21)
                    height vw(21)
                    margin-right titleMargin
                    margin-left smallMargin
                }
            }

        }
        .no-more {
            text-align center
            color gray9
            line-height vw(30)
            margin-top smallMargin
        }
        .select {
            position relative
            background grayF
            width 100vw
            height 100vh
            box-sizing border-box
            padding 0 cellPadding
            overflow hidden
            .title {
                margin smallMargin 0
                line-height vw(20)
                color gray3
                font-size word14
            }
            .tag {
                width vw(60)
                height vw(25)
                color gray3
                background-color grayE
                text-align center
                border-radius 13px
                margin-right vw(20)
                &.active {
                    background-color main-color
                    color grayF
                }
            }
        }
        .order {
            background-color grayF
            margin-top smallMargin
            .line {
                line()
            }
        }
        >>> .van-cell {
            padding 0
        }
    }
</style>
